<template>
	<basic-container>
		<avue-crud :option="option" :data="data" :page="page" ref="crud" @search-change="searchChange" @search-reset="searchReset"
		 @current-change="currentChange" @size-change="sizeChange" @row-del="rowDel" @row-update="rowUpdate" @on-load="onLoad"
		 :before-open="beforeOpen">
			<template slot="code" slot-scope="scope">
				<el-popover placement="right" trigger="hover">
					<vue-qr :text="scope.row.code" :margin="0" :size="150"></vue-qr>
					<el-button size="mini" slot="reference">{{scope.row.code}}</el-button>
				</el-popover>
			</template>
		</avue-crud>
		<el-dialog title="批量新增" :visible.sync="dialogVisible" append-to-body>
			<avue-form ref="form" :option="option0" @submit="handleSubmit">
			</avue-form>
		</el-dialog>
	</basic-container>
</template>

<script>
	import vueQr from 'vue-qr';
	import request from '@/router/axios';

	export default {
		components: {
			vueQr
		},
		data() {
			return {
				dialogVisible: false,
				query: {},
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				option: {
					searchMenuSpan: 4,
					border: true,
					index: true,
					refreshBtn: false,
					excelBtn: true,
					menuWidth: '150px',
					column: [{
							label: "编号",
							prop: "code",
							width: "200px",
							slot: true,
							search: true,
							rules: [{
								required: true,
								trigger: "blur"
							}]
						},
						{
							label: "分配单位",
							prop: "organization",
							rules: [{
								required: true,
								trigger: "blur"
							}]
						},
						{
							label: "状态",
							prop: "status",
							width: "100px"
						}
					]
				},
				data: [],
				option0: {
					column: [{
						label: "生成数量",
						prop: "parm",
						type: 'number',
						minRows: 1,
						maxRows: 100,
						rules: [{
							required: true,
							trigger: "blur"
						}]
					}]
				}
			};
		},
		created() {},
		methods: {
			handleSubmit(form, done) {
				request({
					url: '2/api/WmsBarcode/add',
					method: 'post',
					params: {
						parm: form.parm
					}
				}).then(() => {
					this.dialogVisible = false;
					this.onLoad(this.query);
					done();
				}, error => {
					done();
					console.log(error);
				});
			},
			beforeOpen(done, type) {
				if (["add"].includes(type)) {
					this.dialogVisible = true;
				} else {
					done();
				}
			},
			rowUpdate(row, index, loading, done) {
				return request({
					url: '2/api/WmsBarcode/edit',
					method: 'post',
					data: row
				}).then(() => {
					loading();
					this.onLoad(this.query);
				}, error => {
					done();
					console.log(error);
				});
			},
			rowDel(row) {
				this.$confirm("确定数据删除?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						return request({
							url: '2/api/WmsBarcode/remove',
							method: 'post',
							params: {
								ids: row.id
							}
						});
					})
					.then(() => {
						this.onLoad(this.page);
					});
			},
			searchReset() {
				this.query = {};
				this.page.currentPage = 1;
				this.onLoad(this.page);
			},
			searchChange(params, done) {
				this.page.currentPage = 1;
				this.query = params;
				this.onLoad(this.page);
				done();
			},
			currentChange(currentPage) {
				this.page.currentPage = currentPage;
			},
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
			},
			onLoad(page) {
				request({
					url: '2/api/WmsBarcode/getpages',
					method: 'get',
					params: {
						key: this.query.storageName == undefined ? '' : this.query.storageName,
						type: this.query.storageType == undefined ? '' : this.query.storageType,
						page: page.currentPage,
						limit: page.pageSize
					}
				}).then(res => {
					const data = res.data
					this.data = data.data;
					this.page.total = data.remark;
				});
			}
		}
	};
</script>

<style>
</style>
